<template>
  <a-modal
    title="人员选择"
    :visible="visible"
    :width="1200"
    :height="600"
    @ok="handleOk"
    @cancel="visible = false"
  >
    <searchData ref="search" :search-data="searchArr" @search="search" />
    <b-table
      ref="table"
      :scroll="{ y: 300 }"
      :request="loadData"
      :select-config="{ use: true, type: 'radio', rowKey: 'id' }"
      :page-keys="['pageNumber', 'pageSize', 'total']"
      :columns="columns"
      @row-click="(e, row) => (this.selectRow = row)"
    >
      <span slot="num" slot-scope="text, record, index">{{ index + 1 }}</span>
    </b-table>
  </a-modal>
</template>
<script>
import { getOneOrgUsers } from '@/api/commons'

export default {
  name: 'DetailDialog',
  props: {
    orgId: {
      type: [String, Number]
    },
    otherData: {
      type: Object,
      default() {
        return null
      }
    }
  },
  data() {
    return {
      visible: false,
      columns: [
        { title: '序号', width: 65, scopedSlots: { customRender: 'num' } },
        { title: '人员姓名', dataIndex: 'name', width: 100, },
        { title: '性别', dataIndex: 'sex', width: 65, },
        { title: '电话', dataIndex: 'phoneNum', width: 130, },
        {
          title: '所属单位',
          dataIndex: 'unitStr',
          customRender: (text, record, index) => {
            let pre = record.postPNames.map(v => {
              return v.split('/').slice(0, -1).join('/')
            })
            let departments = pre.join('，')
            if (departments.length < 100) {
              return departments
            } else {
              return (
                <a-tooltip>
                  <template slot="title">
                    {departments}
                  </template>
                  {departments.substr(0, 100)}...
                </a-tooltip>
              )
            }
          }
        },
        {
          title: '岗位',
          dataIndex: 'unitStrDep',
          customRender: (text, record, index) => {
            let pre = record.postPNames.map(v => {
              return v.split('/').slice(-1).join('/')
            })
            let departments = pre.join('，')
            if (departments.length < 100) {
              return departments
            } else {
              return (
                <a-tooltip>
                  <template slot="title">
                    {departments}
                  </template>
                  {departments.substr(0, 100)}...
                </a-tooltip>
              )
            }
          }
        }
      ],
      searchArr: [
        {
          name: '人员姓名',
          value: 'nameLike',
          type: 'input'
        }
      ],
      selectRow: null,
      queryParams: {},
      loadData: (params) => {
        let searchData
        if (this.otherData) {
          searchData = Object.assign(this.otherData, params, this.queryParams)
        } else {
          searchData = Object.assign({ orgPath: this.orgId }, params, this.queryParams)
        }
        searchData.queryPostRelation = true

        return new Promise((resolve) => {
          getOneOrgUsers(searchData)
            .then((res) => {
              res.list.forEach((item) => {
                if (item.sex) {
                  item.sex = item.sex == 1 ? '男' : '女'
                }
              })

              resolve({ ...res, data: res.list, code: 200 })
            })
            .catch((err) => {
              resolve({ err, code: 500 })
            })
        })
      }
    }
  },
  methods: {
    open() {
      this.visible = true
      this.$nextTick((i) => {
        this.$refs.search.handleReset()
      })

      //
      // this.$refs.table && this.$refs.table.getData(null, true)
    },
    handleOk() {
      if (!this.selectRow) {
        return this.$noticeWarning('请选择人员')
      }

      this.visible = false
      this.selectRow.employeeName = this.selectRow.name
      this.selectRow.employeeId = this.selectRow.id
      this.$emit('getPerson', this.selectRow)
    },
    search(val) {
      this.queryParams = val || {}
      this.$refs.table && this.$refs.table.getData(null, true)
    }
  }
}
</script>
